<template>
  <div class="rightContainer">
    <Lease_title>公共交通站点与路线</Lease_title>
    <Box :height="180">
      <div class="LandProfileTotal">
        <el-row class="traffic-about" v-for="(cell, index) in trafficList" :key="index">
          <el-col :span="9" v-for="(item, key) in cell" :key="key" style="display: flex">
            <div class="traffic-icon">
              <i :class="['iconfont', item.icon]" />
            </div>
            <div class="traffic-info">
              <div class="traffic-name">{{ item.name }}</div>
              <div class="traffic-num">
                <span class="traffic-val">{{ item.num }}</span>
                <span class="traffic-until">{{ item.until }}</span>
              </div>
              <div class="traffic-percent">
                <i :class="['iconfont', item.percent > 0 ? 'iconshangsheng' : 'iconxiajiang']" />
                <span>{{ Math.abs(item.percent) }}%</span>
                <span style="margin-left: 6px">同比上年</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </Box>
    <Lease_title>道路车辆扣分原因分析</Lease_title>
    <Box :height="380" :width="420">
      <V3Echarts :options="option1()" container="emergencylbox4" :height="350" :width="400"></V3Echarts>
    </Box>
    <Lease_title>交通事件上报</Lease_title>
    <Box :height="360">
      <div class="table-box">
        <div class="table-head">
          <div class="head-item">发生时间</div>
          <div class="head-item">路段名称</div>
          <!--          <div class="head-item">起飞</div>-->
          <div class="head-item">拥堵时长</div>
          <div class="head-item">等级</div>
        </div>
        <div class="table-body">
          <div class="table-body-warp1">
            <div :class="['row', item.status == 1 ? '' : 'error']" style="color: #ffffffdd" v-for="(item, index) in tableList" :key="index">
              <div class="col">{{ item.name }}</div>
              <div class="col">{{ item.local }}</div>
              <div class="col">{{ item.time }}</div>
              <div class="col" :style="`color:${tableStatusList[item.status].color}`">
                {{ tableStatusList[item.status].label }}
              </div>
              <!--          <div class="col">离线</div>-->
            </div>
          </div>
        </div>
      </div>
    </Box>
  </div>
</template>
<script lang="ts" setup>
import Lease_title from '@/components/Lease_title/index.vue'

import Box from '@/components/Box/index.vue'
import { option1 } from './chtOpt'
import { ref, onMounted } from 'vue'
import { startMarquee } from '@/utils'
const trafficList: any = ref([
  [
    {
      icon: 'iconguidaojiaotongxianlu',
      name: '轨道交通线路',
      until: '条',
      num: '25',
      percent: 10
    },
    {
      icon: 'iconguidaojiaotongzhandian',
      name: '轨道交通站点',
      until: '个',
      num: '259',
      percent: -10
    }
  ],
  [
    {
      icon: 'icongongjiaoxitongxianlu',
      name: '公交系统路线',
      until: '条',
      num: '25',
      percent: 10
    },
    {
      icon: 'icongongjiaozhandian',
      name: '公交站点',
      until: '个',
      num: '259',
      percent: -10
    }
  ]
])
const tableStatusList = [
  {
    color: '#41A5A0',
    label: '畅通'
  },
  {
    color: '#FFCE7F',
    label: '缓行'
  },
  {
    color: '#FF8A95',
    label: '拥堵'
  }
]

const tableList = [
  {
    id: 1,
    name: ' 11-30 10:00',
    time: '54min',
    local: '金鸡湖街道',
    status: 2
  },
  {
    id: 2,
    name: ' 11-30 10:05',
    time: '20min',
    local: '狮山街道',
    status: 0
  },
  {
    id: 3,
    name: ' 11-30 10:13',
    time: '40min',
    local: '太湖街道',
    status: 1
  },
  {
    id: 4,
    name: ' 11-30 10:42',
    time: '15min',
    local: '城南街道',
    status: 0
  },
  {
    id: 5,
    name: ' 11-30 11:00',
    time: '24min',
    local: '唯亭街道',
    status: 0
  },
  {
    id: 6,
    name: ' 11-13 11:16',
    time: '6min',
    local: '斜塘街道',
    status: 0
  },
  {
    id: 7,
    name: ' 11-30 12:02',
    time: '18min',
    local: '胜浦街道',
    status: 0
  },
  {
    id: 8,
    name: ' 11-13 12:16',
    time: '16min',
    local: '枫桥街道',
    status: 0
  },
  {
    id: 9,
    name: ' 11-30 12:52',
    time: '8min',
    local: '郭巷街道',
    status: 0
  },
  {
    id: 10,
    name: ' 11-30 13:02',
    time: '18min',
    local: '东渎街道',
    status: 0
  },
  {
    id: 11,
    name: ' 11-13 14:16',
    time: '16min',
    local: '香山街道',
    status: 0
  },
  {
    id: 12,
    name: ' 11-30 14:52',
    time: '8min',
    local: '越溪街道',
    status: 0
  }
]
onMounted(() => {
  startMarquee('table-body-warp1', '.row')
})
</script>
<style lang="scss" scoped>
.rightContainer {
  .LandProfileTotal {
    //margin-left: 10px;
    @include MarginLeft(10);
  }
  .traffic-about {
    // margin-top: 10px;
    @include MarginTop(15);
    //height: 65px;
    @include hHeight(65);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .traffic-icon {
      //height: 54px;
      //width: 54px;
      @include Width(54);
      @include hHeight(54);
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('~@/assets/images/panel/circle_bg.png') no-repeat;
      background-size: 100% 100%;
      .iconfont {
        color: #fff;
        //font-size: 22px;
        @include FontSize(22);
      }
    }
    .traffic-info {
      display: flex;
      //font-size: 14px;
      @include FontSize(14);
      color: #fff;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      //margin-left: 5px;
      @include MarginLeft(5);
      flex-direction: column;
      justify-content: space-between;
      .traffic-num {
        //margin-left: 5px;
        @include MarginLeft(5);

        .traffic-val {
          //font-size: 24px;
          @include FontSize(20);
          font-family: 'Digital';
          color: rgb(83, 146, 134);
        }
        .traffic-until {
          // margin-left: 4px;
          @include MarginLeft(4);
        }
      }
      .traffic-percent {
        //font-size: 12px;
        @include FontSize(12);

        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        .iconfont {
          //font-size: 12px;
          @include FontSize(12);
          &.iconshangsheng {
            color: #aef66e;
          }
          &.iconxiajiang {
            color: #ff815a;
          }
        }
      }
    }
  }
  .table-box {
    margin: 0 auto;
    width: 85%;
    @include Width(400);
    @include wHeight(360);
    display: flex;
    flex-direction: column;
    @include FontSize(14);
    box-sizing: border-box;
    @include MarginTop(15);
    .table-head {
      @include wHeight(28);
      display: flex;
      background: rgba(200, 226, 255, 0.185);
      @include LineHeight(28);
      //border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      .head-item {
        //flex: 1;
        text-align: center;

        &:first-child {
          @include Width(120);
        }

        &:nth-child(2) {
          @include Width(120);
        }

        &:nth-child(3) {
          @include Width(100);
        }

        &:nth-child(4) {
          @include Width(31);
        }
      }
    }

    .table-body {
      flex: 1;
      overflow-y: hidden;
      //@include wHeight(252);
      @include FontSize(13);

      .row {
        display: flex;
        width: 100%;
        @include Padding(6.5, 0, 6.5, 0);
        box-sizing: border-box;

        .col {
          //flex: 1;
          text-align: center;
          @include FontSize(12);

          &:first-child {
            @include Width(120);
          }

          &:nth-child(2) {
            @include Width(120);
          }

          &:nth-child(3) {
            @include Width(100);
          }

          &:nth-child(4) {
            @include Width(31);
          }
        }

        &:nth-child(even) {
          background: rgb(83, 146, 134);
        }
      }
    }
  }
}
</style>
